<template>
	<view :class="['data_item', clasName]">
		<image v-if="icon" class="icon" :src="icon"></image>
		<view class="data_item_info">
			<view class="data_item_title">
				<view v-if="!icon" class="circle"></view>
				<label>{{ title }}</label>
			</view>
			<view class="data_item_value">
				<text class="value">{{val}}</text>
				<view class="flex" v-if="rate || rate==0">
					<image v-if="rate>=0" src="/static/index1/up.png" alt="" class="img2"></image>
					<image v-else src="/static/firstpage/down.png" alt="" class="img2"></image>
					<text :class="`rate ${rate>=0 ? 'red' : 'green'}`">{{ String(rate).replace('-', '') }}%</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from "vue"
const props = defineProps({
	icon: String,
	title: String,
	rate: { type: String, default: null },
	rateName: String,
	clasName: String,
	val: {
		type: [String, Number],
		default: '0'
	}
});
</script>
<style lang="sass" scoped>
.visit-item
	.data_item
		image
			margin-right: 20rpx
		.data_item_title
			label
				color: #fff
		.data_item_value
			.value
				color: #fff
			.flex
				background: #fff
				height: 30rpx
				border-radius: 10rpx
				padding: 0 8rpx
				align-items: center
.flex
	display: flex
.visit-item.data_item
	width: 100%
	color: #1B1D20
	align-items: flex-start

.data_item
	width: 50%
	margin-top: 20rpx
	align-items: center
	display: flex
	color: #fff
	font-size: 28rpx
	font-family: Source Han Sans CN
	.data_item_title
		display: flex
		align-items: center
		color: #1B1D20
	.circle
		width: 12rpx
		height: 12rpx
		background: linear-gradient(0deg, #455BDF 0%, #5970FA 100%)
		border-radius: 50%
		margin-right: 18rpx
	.icon
		width: 72rpx
		height: 72rpx
		min-width: 72rpx
		margin-right: 10rpx
	.data_item_value
		display: flex
		margin-top: 2rpx
		view
			margin-left: 15rpx
			align-items: center
		.img2
			width: 14rpx
			height: 20rpx
			max-width: 14rpx
			margin-right: 5rpx
		.value
			font-size: 28rpx
			font-family: Source Han Sans CN
			font-weight: bold
			color: #455BDF
		.rate
			display: flex
			align-items: center
			font-size: 26rpx!important
			font-family: Source Han Sans CN
			font-weight: bold!important
			position: relative
			top: -3rpx
			&.red
				color: #FB453B
			&.green
				color: #219821
	.data_item_info 
		display: flex
		flex: 1
		flex-direction: column
		label
			font-weight: 400
			padding-bottom: 0rpx
		>text
			font-weight: bold
		.rate
			margin-top: 5rpx
			font-size: 26rpx
			font-weight: 400
			display: flex
			align-items: center
			.img2
				width: 32rpx
				height: 32rpx
				margin: 0
			view
				margin-left: 8rpx
				color: #fff
</style>
<style lang="scss" scoped>
.data_item.visit-cls {
	image {
			margin-right: 20rpx;
		}
	.data_item_title {
		label{
			color: #fff;
		}
	}
	.data_item_value{ 
		.value{
			color: #fff;
		}
		.flex {
			background: #fff;
			height: 30rpx;
			border-radius: 10rpx;
			padding: 0 8rpx;
			align-items: center;
		}
	}
}
.data_item.w100 {
	width: 100%!important;
}
.data_item.business-item {
	display: block!important;
	margin-right: 20rpx;
}
.data_item.banjian-item {
	display: block;
	width: 100%;
	margin-left: 22rpx;
	margin-top: 32rpx;
	&.public {
		.data_item_title {
			font-size: 12px;
		}
	}
}
.data_item.zonghe {
	margin-left: 15px;
	.data_item_info {
		margin-left: 8px;
	}
}
</style>
